<template>
  <div class="findRouteBox">
    <div class="detailWrapBoxCe">
      <div style="border-radius: 12px; height: 100%; border: 2px solid #003b7a">
        <div class="detailBody">
          <div class="form-container">
            <h3 class="form-title">推送服务</h3>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <div class="vertical-form">
                <div class="form-item">
                  <label class="form-label">预测服务</label>
                  <el-select
                    v-model="form.predictionService"
                    placeholder="请选择"
                    class="form-control"
                  >
                    <el-option
                      v-for="item in subscribleList"
                      :key="item.id"
                      :label="item.desc"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <div class="form-item">
                  <label class="form-label">起始时间 (UTC)</label>
                  <el-date-picker
                    v-model="form.startTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择起始时间"
                    class="form-control"
                  />
                </div>
                <div class="form-item">
                  <label class="form-label">结束时间 (UTC)</label>
                  <el-date-picker
                    v-model="form.endTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择结束时间"
                    class="form-control"
                  />
                </div>
              </div>
              <div class="button-group">
                <div class="buttonBtn buttonBtnCur" @click="handleQuery">
                  查询
                </div>
                <div class="buttonBtn" @click="handleReset">重置</div>
                <div class="buttonBtn" @click="handleSubscribe">新增订阅</div>
              </div>
            </div>
          </div>
          <div class="tableScrollBox">
            <el-table
              :data="tableData"
              class="custom-table"
              style="width: 100%"
              :key="currentPage + '-' + tableData.length"
            >
              <el-table-column label="序号" width="80" align="center">
                <template #default="scope">
                  {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="fcstTypeStr" label="订阅服务" />
              <el-table-column prop="pubTimeStr" label="订阅设置" />
              <el-table-column prop="email" label="订阅邮箱" />
              <el-table-column prop="subValidDays" label="订阅周期" />
              <el-table-column prop="expireTime" label="到期时间" />
              <el-table-column label="操作" width="140">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleSubscriptionsClick(scope.row.id)"
                    >续订</el-button
                  >
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleUnscribleClick(scope.row.id)"
                    >退订</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            class="custom-pagination"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <div class="footerTime">
      <p>当前时间(UTC)：{{ utcTime }}</p>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import {
  subscriptionsIdResubscribleApi,
  subscriptionsIdUnscribleApi,
  noticesTypesSubscribleApi,
  subscriptionsMeApi,
} from "@/api/user";
import { useRouter } from "vue-router";
import {
  ElMessage,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElButton,
} from "element-plus";
import { useTime } from "@/utils/tools/useTime";
const { utcTime } = useTime();
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);

const router = useRouter();
// 点击事件处理

const tableData = ref([]);
const subscribleList = ref([]);
// 计算当前页数据
// const currentPageData = computed(() => {
//   const start = (currentPage.value - 1) * pageSize.value;
//   const end = start + pageSize.value;
//   return tableData.value.slice(start, end);
// });
// 每页条数改变时的回调
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};
// 当前页改变时的回调
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
// 表单数据
const form = ref({
  predictionService: "",
  startTime: "",
  endTime: "",
});

// 查询操作
const handleQuery = () => {
  currentPage.value = 1;
  getSubscriptionsMe();
};

// 重置操作
const handleReset = () => {
  form.value.predictionService = "";
  form.value.startTime = "";
  form.value.endTime = "";
  currentPage.value = 1;
  getSubscriptionsMe();
};

// 新增订阅
const handleSubscribe = () => {
  router.push("/mainLayout/delivery");
};
const handleSubscriptionsClick = async (id) => {
  const { code } = await subscriptionsIdResubscribleApi(id, {});
  if (code === 200) {
    getSubscriptionsMe();
    ElMessage({ message: "续订成功", type: "success" });
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};
const handleUnscribleClick = async (id) => {
  const { code } = await subscriptionsIdUnscribleApi(id, {});
  if (code === 200) {
    getSubscriptionsMe();
    ElMessage({ message: "退订成功", type: "success" });
  }
};
const getNoticesTypesSubscrible = async () => {
  const { code, data } = await noticesTypesSubscribleApi();
  if (code === 200) {
    data.unshift({
      id: "",
      desc: "请选择",
      code: "",
    });
    subscribleList.value = data;
  }
};
const getSubscriptionsMe = async () => {
  const params = {
    endTime: form.value.endTime,
    startTime: form.value.startTime,
    fcstType: form.value.predictionService,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  };
  const { code, data } = await subscriptionsMeApi(params);
  if (code === 200) {
    total.value = data.total;
    tableData.value = data.list;
  }
};
onMounted(() => {
  getNoticesTypesSubscrible();
  getSubscriptionsMe();
});
</script>
<style lang="scss" scoped>
.findRouteBox {
  height: calc(100vh - 66px);
  position: relative;
  background-color: #06112a;
  width: 100%;
  min-width: 1280px;
  z-index: 1;
}

.detailWrapBoxCe {
  padding: 18px 24px 16px 24px;
  width: 100%;
  height: calc(100vh - 94px);
  z-index: 1;
  min-width: 1280px;
  .detailBody {
    width: 100%;
    padding: 0 30px;
    padding-top: 15px;
    overflow: hidden;
    // min-width: 1280px;
  }
}
/* 自定义表格样式 */
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: rgba(0, 175, 255, 0.2);
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: rgba(0, 175, 255, 0.2);
  color: #ffffff;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: rgba(0, 59, 122, 0.2) !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #ffffff;
}
/* 自定义分页样式 */
.custom-pagination {
  /* float: right;
  margin-top: 20px; */
  position: absolute;
  right: 40px;
  bottom: 60px;
}
.custom-pagination .el-pagination__total {
  color: #ffffff;
}
.custom-pagination .el-pagination__sizes {
  color: #ffffff;
}
.custom-pagination .el-pagination__sizes .el-input__inner {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-pagination__sizes .el-input__inner:hover {
  border-color: #4aadf8;
}
.custom-pagination .el-pagination__btn {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-pagination__btn:hover {
  background-color: #4aadf8;
  border-color: #4aadf8;
}

.custom-pagination .el-pagination__active {
  background-color: #00a2ff;
  color: #ffffff;
  border: 1px solid #00a2ff;
}
.custom-pagination .el-pagination__jump {
  color: #ffffff;
}
.custom-pagination .el-input__inner {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-input__inner:hover {
  border-color: #4aadf8;
}
::v-deep .tableScrollBox {
  // height: 562px;
  max-height: calc(100vh - 400px);
  overflow-y: auto;
}

::v-deep .tableScrollBox::-webkit-scrollbar {
  width: 2px;
}
::v-deep .tableScrollBox::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}

::v-deep .tableScrollBox::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}

::v-deep .tableScrollBox::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}

::v-deep .tableScrollBox {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 175, 255, 0.4) rgba(6, 15, 37, 0.5);
}
/* 表格容器背景透明 */
:deep(.el-table) {
  background-color: transparent !important;
  border: none;
}
:deep(.el-table__body tr) {
  background-color: transparent !important;
}

:deep(.el-table__header tr) {
  color: #c5d6e6;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  background-color: transparent !important;
}
:deep(.table-row-even) {
  background-color: rgba(0, 59, 122, 0.2) !important;
}

:deep(.table-row-odd) {
  background-color: transparent !important;
}

:deep(.el-table__row:hover > td) {
  background-color: rgba(0, 59, 122, 0.2) !important;
}

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
:deep(.el-table__cell) {
  border-bottom: none !important;
}
:deep(
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell
  ) {
  padding: 0;
  background-color: rgba(0, 59, 122, 0.2) !important;
}
:deep(.el-table .cell) {
  padding-right: 0 !important;
}
:deep(.el-pagination__sizes) {
  color: #fff;
}
:deep(.el-pagination__total) {
  color: #fff;
}
:deep(.el-pagination__jump) {
  color: #fff;
}
:deep(.el-pager li) {
  background-color: transparent !important;
  color: #fff;
  border: 1px solid #3e465e;
}
:deep(.el-pager li:hover) {
  background-color: #4aadf8 !important;
  color: #fff;
  border: 1px solid #4aadf8;
}
:deep(.el-pager .is-active) {
  background-color: #4aadf8 !important;
  color: #fff;
  border: 1px solid #4aadf8;
}
:deep(.el-input__inner) {
  color: #fff;
  font-size: 12px;
}
:deep(.el-pagination button),
:deep(.el-select__wrapper),
:deep(.el-input__wrapper) {
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: none;
  height: 28px;
  line-height: 28px;
  min-height: 28px;
  border: 1px solid #003b7a;
}
:deep(.el-pagination .el-input__inner),
:deep(.el-select__placeholder) {
  color: #fff;
}
.el-select-dropdown__item {
  height: 28px !important;
  line-height: 28px !important;
  background-color: #060f25;
  color: #fff;
  font-size: 12px;
}
.el-select-dropdown__item:hover {
  background-color: #0c1e4b;
  color: #fff;
}

.el-select-dropdown__item.is-selected {
  background-color: #0c1e4b;
  color: #0083cf !important;
}
.el-select-dropdown__item.is-hovering {
  background-color: #0c1e4b;
  color: #fff;
}
.footerTime {
  // position: fixed;
  // left: 0;
  // bottom: 0;
  width: 100%;
  height: 28px;
  // background-color: red;
  background-color: #050d24;
  p {
    color: #fff;
    text-align: right;
    font-size: 12px;
    line-height: 28px;
    padding-right: 16px;
  }
}
.form-container {
  // overflow: hidden;
}

.form-title {
  // margin-bottom: 10px;
  font-size: 20px;
  color: #fff;
  text-align: left;
  font-weight: 700;
}

.vertical-form {
  align-items: anchor-center;
  display: flex;
  height: 62px;
  margin-bottom: 30px;
  flex-direction: row;
  gap: 16px;
}

.form-item {
  width: 288px;
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
::v-deep .el-date-editor.el-input {
  line-height: 32px;
  width: 288px;
  height: 32px;
}

.form-label {
  margin-bottom: 4px;
  font-size: 14px;
  color: #fff;
  text-align: left;
  line-height: 1;
}

.form-control {
  width: 100%;
  min-height: 32px;
}

/* 按钮组样式 */
.button-group {
  float: right;
  display: flex;
  gap: 12px;
  margin-top: 10px;
  width: 240px;
  justify-content: flex-end;
  .buttonBtn {
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    padding: 6px 16px;
    float: left;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #003b7a;
    background: transparent;
    flex-shrink: 0;
  }

  .buttonBtnCur {
    background: #00afff;
    border: 1px solid #00afff;
  }
}
:deep(.el-table .el-table__cell) {
  padding: 4px 0 3px 0;
  font-size: 12px;
}

/* 更新部分 */
::v-deep .detailWrapBoxCe .el-table__body td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 0 !important;
  width: 100% !important; /* 继承列的固定宽度 */
}
::v-deep .detailWrapBoxCe .el-table__body .cell {
  width: 100% !important;
  overflow: hidden !important;
}
:deep(.custom-tooltip) {
  background-color: #286bf4 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}
::v-deep .detailWrapBoxCe {
  /* 输入框字体 */
  .el-input__inner {
    font-size: 12px !important;
  }
  /* 下拉选择器 选中项字体 */
  .el-select__selected-item {
    font-size: 12px !important;
  }
  /* 下拉选择器 占位符字体 */
  .el-select__placeholder {
    font-size: 12px !important;
  }
  /* 下拉选择器 下拉选项字体 */
  .el-select-dropdown__item {
    font-size: 12px !important;
  }
  /* 日期选择器 关联输入框字体 */
  .el-date-editor .el-input__inner {
    font-size: 12px !important;
  }
}
</style>
